<template>
  <el-form
    :model="model"
    :label-width="labelWidth"
    :label-position="labelPosition"
    :rules="rules"
    :ref="formRef"
  >
    <el-form-item
      v-for="item in formItemArr"
      :key="item.id"
      :label="item.label"
      :prop="item.prop"
    >
      <slot :name="item.beforeSlot"></slot>
      <component
        :is="item.name"
        :options="item.options"
        :model="model"
        @getForm="getForm"
      ></component>
      <slot :name="item.afterSlot"></slot>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "kdForm",
  props: {
    config: Object,
    model: Object,
  },
  created() {
    Object.assign(this, this.config);
  },
  methods: {
    getForm() {
      return this.$refs[this.formRef];
    },
  },
};
</script>
<style lang="scss" scoped></style>
